<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #box {
      background-color: red;
      width: 200px;
      height: 200px;
    }

    .show {
      display: block;
    }

    .hidden {
      display: none;
    }
  </style>
</head>
<body>
   <input type="button" id="btn" value="隐藏">
   <br>
   <div id="box" >
     
   </div>
  <script>
    //1 获取元素
    var btn = document.getElementById('btn');
    //2 给按钮注册事件
    btn.onclick = function () {
      //3 控制div的显示隐藏
      var box = document.getElementById('box');
      // 为什么DOM对象的对应的标签的class属性的名字叫做className ，应为class 在js中是关键字
      // 关键字不可以作为变量或者属性的名字
      box.className = 'hidden';

      // 如何设置按钮对应的元素的属性
      // btn.value = '显示';
      this.value = '显示';
    }



    // this的几种情况
    // 1 普通函数中的this  ->  window
    // 2 构造函数中的this  ->  是当前构造函数创建的对象
    // 3 方法中的this      ->  方法所属的对象
    // 4 事件处理函数中的this   ->  事件源，谁调用的该事件this就指向谁
    
    //4 改变按钮中的文字
  </script>
</body>
</html>
